<template>
  <div class="points-container">
    <h3>积分记录</h3>
    <div class="point-record" v-for="record in records" :key="record.id">
      <div class="record-info">
        <div class="action">{{ record.action }}</div>
        <div class="points" :class="{ 'positive': record.points > 0, 'negative': record.points < 0 }">
          {{ record.points > 0 ? '+' + record.points : record.points }}
        </div>
      </div>
      <div class="record-time">{{ formatDate(record.time) }}</div>
    </div>
    <div v-if="!records.length" class="empty-record">暂无积分记录</div>
  </div>
</template>

<script setup>
const props = defineProps(['records'])
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.point-record { margin-bottom: 10px; border-bottom: 1px dashed #ccc; padding: 10px 0; }
.points.positive { color: green; }
.points.negative { color: red; }
</style>
